<template>
  <div>
    <indexheade></indexheade>
    <el-button type="primary" >添加分类</el-button>
    <div class="w">
      <el-table border :data="productList" style="width: 100%">
          <el-table-column type="index" label="#"> </el-table-column>
          <el-table-column label="分类名称" prop="cat_name"></el-table-column>
          <el-table-column label="是否有效"  prop="cat_deleted"></el-table-column>
          <el-table-column label="排序"  prop="cat_level"></el-table-column>
          <el-table-column label="操作"  prop="id" width="250">
              <template slot-scope="scope">
                <el-button type="primary"  icon="el-icon-edit" size="mini" >编辑</el-button>
                <el-button type="danger"  icon="el-icon-delete" size="mini">删除</el-button>
              </template>
          </el-table-column>
      </el-table>
     <!-- 分页功能 -->
     <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="quertInfo.pagenum"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="quertInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
import indexheade from "../components/indexheade.vue";
export default {
name:'roles',
data() {
  return {
    quertInfo:{
      // 列表层级
      type:1,
      // 当前页码值
      pagenum:1,
      // 每页显示多少条数据
      pagesize:4,
    },
    //总共有多少条数据
    total:1,
    // 表格数据
    productList:[],
    //添加用户框打开和关闭
    dialogVisible: false,
    //修改用户框打开和关闭
    updateDialogVisible: false,
    //分配角色框打开和关闭
    roleDialogVisible: false,
    //单行角色数据
    role:{},
  };
},
created(){
  // 发送请求
  this.getProductList()
},
components:{
  indexheade,
},
methods:{
  //发送网络请求获取商品列表
  getProductList(){
    this.$http.get('categories',{params: this.quertInfo}
    ).then(
    respose => {//正确请求时执行的代码
      console.log(respose.data.data);
      this.productList = respose.data.data.result
      this.total = respose.data.data.total
    },error => {},)
  },
  //页码值切换时触发
  handleCurrentChange(newvalue){
  console.log(newvalue)
  this.quertInfo.pagenum = newvalue
  this.getProductList()
  },
  //当切换每页显示多少条时显示
  handleSizeChange(newvalue){
  console.log(newvalue)
  this.quertInfo.pagesize = newvalue
  this.getProductList()
  },
},
}
</script>

<style scoped>
.el-button{
  margin-bottom: 15px;
}
.el-tag{
  margin: 7px;
}
.bar{
  border-bottom:1px solid #eee;
  margin-left: 50px;
}
.bar-top{
  border-top:1px solid #eee;
}
.b{
  border-bottom:1px solid #eee;
}
.vcenter{
  display: flex;
  align-items: center;
}
</style>